<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>Pool: ${pool.questionPoolName}</h2>
		<h6 id="poolId" class="hidden">${pool.questionPoolId}</h6>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="../" class="btn btn-primary btn-sm">Back</a>
		</div>
		<div id="main_content">

			<!-- ************** -->
			<!-- Able to change -->
			<div class="question_pool">
				<div class="pool_name hidden">
					<ul>
						<li><h6 class="poolId hidden">${pool.questionPoolId}</h6>
							<h3 class="poolNum">Pool Name:</h3>
							<h3 class="poolName">${pool.questionPoolName}</h3></li>
						<li class="pull-right"><a class="poolEdit" href=""> <i
								class="fa fa-wrench fa-2x"></i><span class="nav-text">Edit</span></a><a
							class="poolRemove" href="#"><i class="fa fa-trash fa-2x"></i><span
								class="nav-text">Remove</span></a></li>
					</ul>
				</div>
				<div class="pool_content">
					<div class="add_question">
						<a class="addQuestion" href="#">Add Question</a>
					</div>
					<c:forEach var="question" items="${listQuestion}">
						<c:choose>
							<c:when test="${question.type == 1}">
								<div class="question">
									<div class="question_number">
										<ul>
											<li><h6 class="questionId hidden">${question.questionId}</h6>
												<h5 class="questionNum">Question 2:</h5></li>
											<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
												class="removeQuestion" href="">Remove</a></li>
										</ul>
									</div>
									<div class="question_name">${question.question}</div>

									<div class="question_answer">
										<c:choose>
											<c:when test="${question.rightAnswer == 'A'}">
												<div>
													<input type="radio" checked disabled>A.
													True
												</div>
												<div>
													<input type="radio" disabled>B. False
												</div>
											</c:when>
											<c:otherwise>
												<div>
													<input type="radio" disabled>A. True
												</div>
												<div>
													<input type="radio" checked disabled>B.
													False
												</div>
											</c:otherwise>
										</c:choose>
									</div>
								</div>
								<div class="add_question">
									<a class="addQuestion" href="#">Add Question</a>
								</div>
							</c:when>
							<c:when test="${question.type == 2}">
								<div class="question">
									<div class="question_number">
										<ul>
											<li><h6 class="questionId hidden">${question.questionId}</h6>
												<h5 class="questionNum">Question 2:</h5></li>
											<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
												class="removeQuestion" href="">Remove</a></li>
										</ul>
									</div>
									<div class="question_name">${question.question}</div>

									<div class="question_answer">
										<div>
											<input type="radio"
												<c:if test="${question.rightAnswer == 'A'}">checked</c:if>
												disabled>A. ${question.answers[0]}
										</div>
										<div>
											<input type="radio"
												<c:if test="${question.rightAnswer == 'B'}">checked</c:if>
												disabled>B. ${question.answers[1]}
										</div>
										<div>
											<input type="radio"
												<c:if test="${question.rightAnswer == 'C'}">checked</c:if>
												disabled>C. ${question.answers[2]}
										</div>
										<div>
											<input type="radio"
												<c:if test="${question.rightAnswer == 'D'}">checked</c:if>
												disabled>D. ${question.answers[3]}
										</div>
									</div>
								</div>
								<div class="add_question">
									<a class="addQuestion" href="#">Add Question</a>
								</div>
							</c:when>
							<c:when test="${question.type == 3}">
								<div class="question">
									<div class="question_number">
										<ul>
											<li><h6 class="questionId hidden">${question.questionId}</h6>
												<h5 class="questionNum">Question 2:</h5></li>
											<li class="pull-right"><a class="editQuestion" href="">Edit</a><a
												class="removeQuestion" href="">Remove</a></li>
										</ul>
									</div>
									<div class="question_name">${question.question}</div>

									<div class="question_answer">
										<div>
											<input type="checkbox"
												<c:if test="${fn:contains(question.rightAnswer, 'A')}">checked</c:if>
												disabled>A. ${question.answers[0]}
										</div>
										<div>
											<input type="checkbox"
												<c:if test="${fn:contains(question.rightAnswer, 'B')}">checked</c:if>
												disabled>B. ${question.answers[1]}
										</div>
										<div>
											<input type="checkbox"
												<c:if test="${fn:contains(question.rightAnswer, 'C')}">checked</c:if>
												disabled>C. ${question.answers[2]}
										</div>
										<div>
											<input type="checkbox"
												<c:if test="${fn:contains(question.rightAnswer, 'D')}">checked</c:if>
												disabled>D. ${question.answers[3]}
										</div>
									</div>
								</div>
								<div class="add_question">
									<a class="addQuestion" href="#">Add Question</a>
								</div>
							</c:when>
						</c:choose>
					</c:forEach>
				</div>
			</div>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
		</div>

	</div>
</div>

